<script lang="ts">
    import { onMount } from "svelte";
    import type { Board, Space, User } from ".";
    import { topic_pings, debugBy, newBoard } from ".";
    import * as Avatar from "$lib/components/ui/avatar";
    import * as Lucid from "@lucide/svelte";
    import UiButton from "$lib/core/UiButton.svelte";
    import UiBar from "$lib/core/UiBar.svelte";
    import { Badge } from "$lib/components/ui/badge";
    import { type MqttClient } from "mqtt";
    import equal from "fast-deep-equal";
    import { Button } from "$lib/components/ui/button";
    import UiAvatar from "./UiAvatar.svelte";

    type UiExtAct = { side: string; act: string };

    let {
        space = $bindable(),
        user = $bindable(),
        mqttCli,
        leaveSpace,
        patchState,
    }: {
        space: Space;
        user: User;
        mqttCli?: MqttClient;
        leaveSpace: (space: Space) => void;
        patchState: (update: (s: Space) => void) => void;
    } = $props();
    let board = $state<Board | undefined>(
        space.state.boards.find((board) => board.id === space.state.active_id),
    );
    let addBoard = () => {
        patchState((s) => s.state.boards.push(newBoard()));
    };
    let uiExtAct = $state<UiExtAct>();
    let showUiBar = $state(true);
    let onUiAct = (exAct?: UiExtAct) => {
        if (!exAct || equal(uiExtAct, exAct)) {
            uiExtAct = undefined;
        } else {
            uiExtAct = exAct;
        }
    };

    onMount(() => {
        let timer = setInterval(() => {
            if (mqttCli) {
                mqttCli.publish(topic_pings, "", {
                    properties: {
                        userProperties: {
                            space_id: space.id.toString(),
                            oper_id: user.id.toString(),
                        },
                    },
                });
            }
        }, 10000);
        return () => {
            clearInterval(timer);
        };
    });

    $inspect(space.state).with(debugBy("UiSpace"));
</script>

<div class="absolute w-full h-full">
    <div
        class="absolute w-full h-full flex flex-col"
        role="none"
        onclick={() => onUiAct()}
    >
        <div class="flex">
            <div class="p-2">
                <UiButton>
                    <Lucid.Menu />
                </UiButton>
            </div>
            {#if showUiBar}
                <UiBar class="flex-1 p-2 flex items-center">
                    <Badge variant="outline"
                        ><p class="max-w-[200px] overflow-hidden text-ellipsis">
                            {space.name}
                        </p></Badge
                    >
                    <UiButton
                        class="ml-2"
                        onclick={() => onUiAct({ side: "T", act: "boards" })}
                    >
                        <Lucid.LaptopMinimal />
                    </UiButton>
                    <div class="flex-1"></div>
                    <UiButton>
                        <Lucid.Lightbulb />
                    </UiButton>
                    <UiButton
                        class="ml-2"
                        onclick={() => onUiAct({ side: "T", act: "users" })}
                    >
                        <Lucid.Users />
                    </UiButton>
                    <UiButton
                        class="ml-2"
                        onclick={() => space && leaveSpace(space)}
                    >
                        <Lucid.LogOut />
                    </UiButton>
                </UiBar>
            {/if}
            <div class="p-2">
                <Avatar.Root>
                    <Avatar.Image
                        src="https://tse2-mm.cn.bing.net/th/id/OIP-C.ZfOHXxp8FE-ABclF1k-cBgHaHa?rs=1&pid=ImgDetMain&cb=idpwebp1&o=7&rm=3"
                        alt="@shadcn"
                    />
                    <Avatar.Fallback>CN</Avatar.Fallback>
                </Avatar.Root>
            </div>
        </div>
        <div class="relative flex-1 flex">
            {#if board}
                {#if showUiBar}
                    <UiBar class="p-2 flex flex-col justify-center">
                        <UiButton
                            onclick={() => onUiAct({ side: "L", act: "move" })}
                            ><Lucid.Move /></UiButton
                        >
                        <UiButton class="mt-2"><Lucid.Palette /></UiButton>
                        <UiButton class="mt-2"><Lucid.Tangent /></UiButton>
                        <UiButton class="mt-2"><Lucid.Type /></UiButton>
                        <UiButton class="mt-2"><Lucid.Sigma /></UiButton>
                        <UiButton class="mt-2"><Lucid.Image /></UiButton>
                        <UiButton class="mt-2"><Lucid.Video /></UiButton>
                        <UiButton class="mt-2"><Lucid.Globe /></UiButton>
                        <UiButton class="mt-2"><Lucid.ListTodo /></UiButton>
                        <UiButton class="mt-2"><Lucid.Gamepad2 /></UiButton>
                    </UiBar>
                {/if}
                <div class="flex-1 relative">
                    {#if uiExtAct?.side === "R"}
                        <UiBar
                            class="absolute w-36 h-full top-0 right-0 bg-white"
                        ></UiBar>
                    {/if}
                </div>
                {#if showUiBar}
                    <UiBar class="p-2 flex flex-col justify-center">
                        <UiButton
                            onclick={() => onUiAct({ side: "R", act: "info" })}
                            ><Lucid.Info /></UiButton
                        >
                        <UiButton class="mt-2"><Lucid.Layers /></UiButton>
                        <UiButton class="mt-2"
                            ><Lucid.RulerDimensionLine /></UiButton
                        >
                    </UiBar>
                {/if}
            {:else}
                <div class="flex-1 flex justify-center items-center">
                    <Button variant="outline" onclick={addBoard}>
                        <Lucid.Plus />
                        新建黑板
                    </Button>
                </div>
            {/if}
            {#if uiExtAct?.side === "T"}
                <UiBar class="absolute w-full top-0 left-0">
                    <div
                        class="p-2 w-full flex justify-center overflow-x-auto border-y"
                    >
                        {#if uiExtAct.act === "boards"}
                            {#each space.state.boards as board}
                                <Button
                                    class="max-w-[120px] overflow-hidden text-ellipsis"
                                    variant="outline">{board.label}</Button
                                >
                            {/each}
                            <Button
                                variant="outline"
                                size="icon"
                                onclick={addBoard}
                            >
                                <Lucid.Plus />
                            </Button>
                        {/if}
                        {#if uiExtAct.act === "users"}
                            {#each space.users as user}
                                <UiAvatar {user} />
                            {/each}
                        {/if}
                    </div>
                </UiBar>
            {/if}
        </div>
        {#if showUiBar && board}
            <div class="flex">
                <UiBar class="p-2 flex">
                    <UiButton>
                        <Lucid.Undo />
                    </UiButton>
                    <UiButton class="ml-2">
                        <Lucid.Redo />
                    </UiButton>
                </UiBar>
                <div class="flex-1"></div>
            </div>
        {/if}
    </div>
</div>
